<script setup lang="ts">
import { formatDate } from "@/views/drawHist/hooks/useUtils";
import useShowMore from "../../hooks/useShowMore";
import MoreNums from "./MoreNums.vue";
import MoreTips from "./MoreTips.vue";
import { getSvg } from "@/utils";
import useFetchHome, { useFetchHomeRefs } from "../../hooks/useFetchHome";
defineOptions({
  name: "WinDetail"
});
const props = defineProps({
  resItem: {
    type: Object,
    default: () => ({})
  }
});

const { show } = useShowMore();
const resItem = toRef(props, "resItem");
const { handlePrev, handleNext } = useFetchHome();
const { draw_type, is_live } = useFetchHomeRefs();
const route = useRoute();
</script>
<template>
  <div class="relative">
    <img class="w-full h-155" :src="getSvg('home_banner')" />
    <div
      v-if="is_live && route.path === '/chkNum'"
      class="w-104 h-27 absolute top-6 right-0 bg-[url(@/assets/svg/Frame_782.svg)] bg-no-repeat bg-cover bg-center flex justify-around items-center px-4"
    >
      <img class="w-18 aspect-ratio-[18/15]" :src="getSvg('Union')" alt="" />
      <p class="font-normal text-12 color-#fff text-center not-italic">
        Live Draw
      </p>
    </div>
    <div
      class="w-362 mx-auto h-auto bg-[#fff] shadow-[0px_4px_8px_0px_rgba(58,90,112,0.22)] rounded-10 translate-y-[-33px] px-16 py-20 mb-20 relative"
    >
      <div class="mx-auto">
        <div
          class="font-normal text-26 color-[#0f0f0f] lh-30 text-center not-italic mb-6"
        >
          {{ $t("title22") }}
        </div>
        <div class="text-center font-normal text-12 lh-14 not-italic">
          <span class="color-[#58A6DD]">{{ $t("title12") + ": " }}</span>
          <span class="color-[#004D8E]">{{
            formatDate(resItem?.result?.draw_date)
          }}</span>
        </div>
      </div>
      <div class="h-56 flex flex-col justify-end items-start mb-22 ml-10">
        <div class="font-bold color-[#414141] text-16 lh-19">
          {{ $t("title18") }}
        </div>
        <div class="font-normal text-14 lh-16">
          <span class="color-[#0094CF]">Reward</span>
          <span class="color-[#FF5656]">{{
            resItem?.list?.first?.[0]?.price
          }}</span>
          <span class="color-[#0094CF]">บาท</span>
        </div>
      </div>
      <div class="w-330 mx-auto h-60 bg-[#FFEA2F] rounded-10 center mb-22">
        <span
          class="font-bold text-32 color-[#111199] lh-38 tracking-[5px] not-italic"
        >
          {{ resItem?.list?.first?.[0]?.draw_number }}</span
        >
      </div>
      <div class="w-330 h-132 mx-auto px-8 mb-22">
        <div class="w-full h-36 flex items-center mb-12">
          <div class="flex-[1] flex flex-col justify-between items-start">
            <div class="font-bold text-16 lh-19 color-[#414141]">
              Last 2 Digits
            </div>
            <div class="font-normal text-14 lh-16">
              <span class="color-[#0094CF]">Reward</span>
              <span class="color-[#FF5656]">{{
                resItem?.list?.last2?.[0]?.price
              }}</span>
              <span class="color-[#0094CF]">บาท</span>
            </div>
          </div>
          <div class="flex-[1] flex gap-x-12">
            <span
              v-for="(it1, idx1) in resItem?.list?.last2?.filter((it11:any) => it11?.draw_number)"
              :key="idx1"
              class="inline-block w-74 h-30 rounded-4 b-1 b-solid b-#6EB8F2 font-bold text-20 color-#0094CF lh-30 tracking-[2px] text-center not-italic"
              >{{ it1.draw_number }}</span
            >
            <span
              v-if="resItem?.list?.last2?.length === 1"
              class="inline-block w-74 h-30"
            ></span>
          </div>
        </div>
        <div class="w-full h-36 flex items-center mb-12">
          <div class="flex-[1] flex flex-col justify-between items-start">
            <div class="font-bold text-16 lh-19 color-[#414141]">
              First 3 Digits
            </div>
            <div class="font-normal text-14 lh-16">
              <span class="color-[#0094CF]">Reward</span>
              <span class="color-[#FF5656]">{{
                resItem?.list?.last3f?.[0]?.price
              }}</span>
              <span class="color-[#0094CF]">บาท</span>
            </div>
          </div>
          <div class="flex-[1] flex gap-x-12">
            <span
              v-for="(it2, idx2) in resItem?.list?.last3f?.filter((it22:any) => it22?.draw_number)"
              :key="idx2"
              class="inline-block w-74 h-30 rounded-4 b-1 b-solid b-#6EB8F2 font-bold text-20 color-#0094CF lh-30 tracking-[2px] text-center not-italic"
              >{{ it2.draw_number }}</span
            >
          </div>
        </div>
        <div class="w-full h-36 flex items-center">
          <div class="flex-[1] flex flex-col justify-between items-start">
            <div class="font-bold text-16 lh-19 color-[#414141]">
              Last 3 Digits
            </div>
            <div class="font-normal text-14 lh-16">
              <span class="color-[#0094CF]">Reward</span>
              <span class="color-[#FF5656]">{{
                resItem?.list?.last3b?.[0]?.price
              }}</span>
              <span class="color-[#0094CF]">บาท</span>
            </div>
          </div>
          <div class="flex-[1] flex gap-x-12">
            <span
              v-for="(it3, idx3) in resItem?.list?.last3b?.filter((it33:any) => it33?.draw_number)"
              :key="idx3"
              class="inline-block w-74 h-30 rounded-4 b-1 b-solid b-#6EB8F2 font-bold text-20 color-#0094CF lh-30 tracking-[2px] text-center not-italic"
              >{{ it3.draw_number }}</span
            >
          </div>
        </div>
      </div>
      <div
        class="w-330 mx-auto h-112 b-1 b-solid b-#6EB8F2 bg-[#E2F1FF] py-16 pl-16 rounded-10 flex flex-col justify-between items-start mb-20"
      >
        <div class="">
          <div class="font-bold text-16 lh-19 color-[#414141]">
            1st Prize Adjacent Prizes
          </div>
          <div class="font-normal text-14 lh-16">
            <span class="color-[#0094CF]">Reward</span>
            <span class="color-[#FF5656]">{{
              resItem?.list?.near1?.[0]?.price
            }}</span>
            <span class="color-[#0094CF]">บาท</span>
          </div>
        </div>
        <div
          class="font-bold text-24 color-[#08749E] lh-28 tracking-[1px] not-italic flex justify-around items-center w-full"
        >
          <span class="">{{ resItem?.list?.near1?.[0]?.draw_number }}</span>
          <span class="w-0 h-22 b-l-1 b-l-solid b-l-#6EB8F2"></span>
          <span>{{ resItem?.list?.near1?.[1]?.draw_number }}</span>
        </div>
      </div>
      <div>
        <MoreNums v-if="show" :resItem="resItem" />
        <MoreTips />
      </div>

      <div
        :class="[
          'absolute left-[-14px] top-68 z-99',
          draw_type === 'last_draw' ? 'disabled_click' : ''
        ]"
        @click="handlePrev"
      >
        <img
          class="w-29 h-60"
          :src="
            getSvg(draw_type === 'last_draw' ? 'Frame_595(1)' : 'Frame_595(2)')
          "
        />
      </div>
      <div
        :class="[
          'absolute right-[-14px] top-68 z-99',
          draw_type === 'next_draw' ? 'disabled_click' : ''
        ]"
        @click="handleNext"
      >
        <img
          class="w-29 h-60"
          :src="
            getSvg(draw_type === 'next_draw' ? 'Frame_595(3)' : 'Frame_595')
          "
        />
      </div>
    </div>
  </div>
</template>
